<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="./css/shopping-cart.css"/>
    <script src="./libs/layui/layui.js"></script>
    <link rel="stylesheet" href="./libs/layui/css/layui.css"/>
    <title>numberInput - 购物车</title>
</head>

<body>
<div class="container">
    <div class="header">作者的购物车</div>
    <div class="body">
        <div class="layui-form" id="goods"></div>
    </div>
    <div class="footer">
        <button class="layui-btn layui-btn-primary" id="egg">结算</button>
    </div>
</div>
<!--看看作者都买了啥-->
<script type="text/html" id="tpl-goods">
    <div class="goods">
        <div class="goods-thumb">
            <img src="./imgs/goods_thumb.jpg" alt="宝贝封面">
        </div>
        <div class="goods-info">
            <div class="goods-name">
                <a href="javascript:void(0);" class="egg">ROG华硕RTX3090 O24G GAMING猛禽白色TUF游戏显卡</a>
            </div>
            <div class="goods-footer">
                <div class="goods-price">¥ 9.9 包邮</div>
                <div class="goods-total">
                    <input type="text" placeholder="数量" class="layui-input total" value="1"/>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
    // 祖传LSP
    for (var i = 0; i < 10; i++) {
        document.getElementById("goods").innerHTML += document.getElementById("tpl-goods").innerHTML;
    }

    layui
        .config({
            base: "./libs/layui_exts/",
        })
        .extend({
            numberInput: "numberInput/js/index",
        });

    function colorEgg(e) {
        e.preventDefault();
        layer.alert("不是大哥, 你这怕是搓衣板没跪够吧!<br/>自家媳妇他当真就不香吗???", {icon: 2, title: "你想干嘛???"})
        return false;
    }

    layui.use(["numberInput", "layer", "jquery"], function () {
        var numberInput = layui.numberInput;
        var layer = layui.layer;
        var $ = layui.jquery;


        $(".egg").click(colorEgg);

        $("#egg").click(colorEgg);


        numberInput.render(".total", {
            max: 10,
            min: 1,
            // 新增皮肤, 适配移动端
            skin: "media-screen"
        })
    });
</script>
</body>
</html>
